<h1 class="text">Welkom!<span class="shadow">Welkom!</span></h1>

<p><b>bij WebBooks boekenwinkel online.</b></p>

<table>
  <tr>
    <th colspan="5">Populair</th>
  </tr>
  <tr>
    <td>
      <div>
        
    <% @populair_products.each_index do |index| %>
      <div class="product">
      <%=product_image @populair_products[index], :thumbnail %>
      <%=link_to @populair_products[index].name, product_path(@populair_products[index]) %>
      </div>
      
        <% if index == 3  %>
      </div>
      <div style="display: none;" id="more_populair">
        <% end %>

    <% end %>
      </div>
    </td>
  </tr>
</table>

<% if @populair_products.size > 4 %>
<p style="text-align: right;" id="more_populair_link">
  <%=link_to_function 'Meer', "$('more_populair').show(); $('more_populair_link').hide(); $('less_populair_link').show();" %>
</p>

<p style="text-align: right; display: none;" id="less_populair_link">
  <%=link_to_function 'Minder', "$('more_populair').hide(); $('more_populair_link').show(); $('less_populair_link').hide();" %>
</p>
<% end %>

<table>
  <tr>
    <th colspan="5">Willekeurig</th>
  </tr>
  <tr>
    <td>
    <% @random_products.each do |product| %>
      <div class="product">
      <%=product_image product, :thumbnail %>
      <%=link_to product.name, product_path(product) %>
      </div>

    <% end %>
    </td>
  </tr>
</table>